<script lang="ts" setup>
  import { ref } from 'vue';
  import notice from '@/assets/music/notice.mp3';
  import * as _ from '@usemathx/utils';

  const status = ref(false);
  const audioRef = ref<any>(null);

  const handleToggle = () => {
    status.value = !status.value;
    if (status.value) {
      audioRef.value.muted = false;
    }
  };

  _.listen('playRingTone', (val) => {
    if (status.value) {
      audioRef.value.play();
    }
  });
</script>

<template>
  <div @click="handleToggle">
    <icon-sound-fill v-if="status" />
    <icon-mute-fill v-else />
    <audio :src="notice" muted ref="audioRef"></audio>
  </div>
</template>
